<script setup>
import { ref } from 'vue';
const pageType = ref('hasData');
import TabbarExam from "../component/TabbarExam.vue";
const holidayList = ref([
  {
    id: 1,
    title: '张梅梅',
    startDate: '2023/11/16 00:00:00',
    endDate: '2023/11/17 00:00:00',
    state: '未同意',
    targetUrl: "/pages/user/sign2Spe",
    btnText: '详情'
  },
  {
    id: 2,
    title: '张梅梅',
    startDate: '2023/11/16 00:00:00',
    endDate: '2023/11/17 00:00:00',
    state: '未同意',
    targetUrl: "/pages/user/sign2Spe",
    btnText: '详情'
  },
  {
    id: 3,
    title: '张梅梅',
    startDate: '2023/11/16 00:00:00',
    endDate: '2023/11/17 00:00:00',
    state: '未同意',
    targetUrl: "/pages/user/sign2Spe",
    btnText: '详情'
  },
  {
    id: 4,
    title: '张梅梅',
    startDate: '2023/11/16 00:00:00',
    endDate: '2023/11/17 00:00:00',
    state: '未同意',
    targetUrl: "/pages/user/sign2Spe",
    btnText: '详情'
  }
]);
const goToPage = (item) => {
  uni.navigateTo({
    url: item.targetUrl
  });
};
</script>

<template>
  <view class="back">
    <view>
      <TabbarExam/>
    </view>
    <view>
      <view>
        <view
            v-for="(item, index) in holidayList"
            :key="item.id"
            class="pc"
        >
          <view class="icon" >

            <view class="zj">
              <view class="lg">
                <image class="bz" src="/static/image/bz8@2x.png" ></image>
                <view>
                  <text class="title2">{{ item.title }}</text>
                </view>
              </view>

              <view class="wz">
                <text class="title3">
                  计划留校开始时间：{{ item.startDate }} <br>
                  计划留校结束时间：{{ item.endDate }} <br>
                </text>
                <hr class="hr">
                <view class="state-btn-row">
                  <text class="state-text">{{ item.state }}</text>
                  <view class="status-btn-row">
                    <!--                  <button-->
                    <!--                      class="action-btn"-->
                    <!--                      @click="goToPage(item)"-->
                    <!--                  >-->
                    <!--                    {{ item.btnText }}-->
                    <!--                  </button>-->
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>

.pc {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 15px;
}

.icon {

  width: 351px;
  height: 140px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px 0 #E2E4EB;
  border-radius: 10px;
}

.zj{
  position: absolute;
  top: 20px;
  left: 20px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 0;
  padding-right: 10px;
}

.bz{
  width: 22px;
  height: 22px;
  display: block;
  margin-right: 8px;
}

.title2 {
  width: 119px;
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  color: #212121;
}

.lg {
  display: flex;
  align-items: center;
}

.title3{
  width: 203px;
  height: 66px;
  font-weight: 400;
  font-size: 12px;
  color: #5D5E5D;
  line-height: 22px;
}

.hr{
  width: 100%;
  margin: 8px 0;
  border: none;
  border-top: 1px solid #ccc;
}

.state-btn-row {
  width: 330px;
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -7px;
}

.state-text {
  font-weight: 400;
  font-size: 12px;
  color: #CB000E;
}

.status-btn-row {
  width: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

.action-btn {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  margin: 0;
}

.action-btn:active {
  background-color: #0066cc;
}

.back{
  background-color: #F2F4F7;
  height: 680px;
  padding-top: 12px;
}



</style>